iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

30天學網頁設計系列 第 12

Day12 hover應用(一)

  • 分享至 

  • xImage
  •  

雖然與網頁互動的過程會花費更多的時間,但它卻是吸引人很重要的一項因素,因此在設計部落格版面的時候,有很多人喜歡加入一些互動式的訊息,在設計CSS時,最常用到的屬性就 hover,讓我覺得非常好用且很容易上手,簡單來說,hover是在控制當滑鼠移至某元件時,某元件該如何反應,以下將介紹CSS中有用到hover屬性的地方~

hover + a 超連結應用

這是 hover 常被使用的地方,當滑鼠移至超連結時,不論是文字變色、位移、換背景都是利用 hover 達到。
以下的CSS程式碼範例是滑鼠移至網誌標題時,網誌標題顏色變成桃紅色並且往右下位移

#banner h1 a:hover{
color: #fc3a63;
position: relative;
top: 1px;
left: 1px;
}

hover + background 背景變化

  • 讓滑鼠所在的區域與其他區域有所區隔,比較容易找到滑鼠位置,
.article-head{
background: #ccc;  /* 原本的背景顏色 */
}
.article:hover .article-head{
background: #aaa;  /* 當滑鼠經過時,背景顏色改變 */
}

採用.article:hover/.article-head 而不是.article-head:hover的原因是希望滑鼠移至該文章任何區塊,背景都能有變化,若只定義在.article-head:hover的話,滑鼠移至文章標題那個灰色區塊背景才會變化,若移至圖片就不會變化

  • 除了背影顏色外,背景圖案也可以變化,以下範例是將連結文字前方加一個小圖,滑鼠經過時小圖會變換
.title h2{
background: url(灰色愛心的icon) top left no-repeat;  /* 滑鼠未移至文章時的icon */
padding-left: 14px;  /* 每篇文章標題前都有一個小圖,利用padding讓文字往後移,不要遮住圖 */
}
.article:hover .title h2{
background: url(紅色愛心的icon) top left no-repeat;  /* 滑鼠移至文章時的icon */
}

hover + display 顯示

  • 滑鼠移至某區塊時,出現原本沒有的文字或圖片提醒讀者
.more a{  /* 因為繼續閱讀是個超連結,要用a來定義 */
display: none;  /* 平常設定不要顯示 */
}
.article:hover .more a{
display: block;  /* 當滑鼠移至該篇文章時,設定以block顯示,可設定超連結以一個區塊顯示 */
width: 150px;  /* 設定長與寬 */
height: 150px;
background: url(image url) center center no-repeat;  /* 設定背景 */
position: absolute;  /* 將繼續閱讀的位置放置於文章左上角,top=0, left=0 */
top: 0px;
left: 0px;
font-size: 0px;  /* 不要文字出現,因為設定背景來顯示 */
}
  • 下拉式選單
#links-row-2 .box-text{
display: none;  /* 平常設定不要顯示 */
}
#links-row-2 .box:hover .box-text{
display: block;  /* 當滑鼠移至該元件時,才會顯示 */
}

要注意不可以寫成 #links-row-2 .box-title:hover .box-text ,CSS的寫法要考慮到層級問題,因為 box-text 是包含在 box 裡面,但不是包含在 box-title 裡面。


上一篇
Day11 HTML 切版介紹(下)
下一篇
Day13 hover應用(二)
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言